<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>赞助列表 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f8f9fa;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding-bottom: 60px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: white;
      padding: 12px 15px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    
    /* 筛选容器 */
    .filter-container {
      background-color: white;
      border-bottom: 1px solid #eee;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }
    
    .filter-container.collapsed {
      max-height: 130px;
    }
    
    .filter-container.expanded {
      max-height: 800px;
    }
    
    /* 基础筛选区 */
    .basic-filter {
      padding: 10px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .search-box {
      position: relative;
      margin-bottom: 10px;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border-radius: 8px;
      border: 1px solid #ddd;
      font-size: 14px;
    }
    
    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
    
    .filter-tags {
      display: flex;
      overflow-x: auto;
      padding-bottom: 5px;
      gap: 8px;
    }
    
    .filter-tag {
      padding: 5px 12px;
      border-radius: 16px;
      font-size: 13px;
      white-space: nowrap;
      background-color: #f0f0f0;
      color: #333;
      cursor: pointer;
    }
    
    .filter-tag.active {
      background-color: #0d6efd;
      color: white;
    }
    
    /* 筛选展开/收起按钮 */
    .filter-toggle {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px 15px;
      color: #0d6efd;
      font-size: 14px;
      cursor: pointer;
      border-bottom: 1px solid #eee;
    }
    
    .filter-toggle i {
      margin-left: 5px;
      transition: transform 0.3s ease;
    }
    
    .filter-toggle.collapsed i {
      transform: rotate(180deg);
    }
    
    /* 高级筛选区 */
    .advanced-filters {
      padding: 15px;
    }
    
    .filter-section {
      margin-bottom: 20px;
    }
    
    .filter-section:last-child {
      margin-bottom: 0;
    }
    
    .filter-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #333;
      display: flex;
      align-items: center;
    }
    
    .filter-title i {
      margin-right: 6px;
      color: #0d6efd;
    }
    
    /* 复选框筛选 */
    .checkbox-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    
    .checkbox-item {
      flex: 0 0 calc(50% - 5px);
      display: flex;
      align-items: center;
      font-size: 13px;
      color: #333;
    }
    
    .checkbox-item input {
      margin-right: 6px;
    }
    
    /* 滑块筛选 */
    .slider-container {
      padding: 5px 0;
    }
    
    .slider-info {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #666;
      margin-bottom: 5px;
    }
    
    .range-slider {
      width: 100%;
      height: 6px;
      -webkit-appearance: none;
      appearance: none;
      background: #e0e0e0;
      border-radius: 3px;
      outline: none;
    }
    
    .range-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #0d6efd;
      cursor: pointer;
    }
    
    /* 下拉筛选 */
    .select-container {
      position: relative;
    }
    
    .custom-select {
      width: 100%;
      padding: 8px 35px 8px 15px;
      border-radius: 8px;
      border: 1px solid #ddd;
      background-color: white;
      appearance: none;
      font-size: 14px;
    }
    
    .select-arrow {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
      pointer-events: none;
    }
    
    /* 筛选操作按钮 */
    .filter-actions {
      display: flex;
      gap: 10px;
      padding: 10px 15px;
      background-color: #f9fafb;
      border-top: 1px solid #eee;
    }
    
    .filter-btn {
      flex: 1;
      padding: 8px 0;
      font-size: 14px;
      border-radius: 8px;
    }
    
    /* 筛选结果和已选条件 */
    .filter-result {
      padding: 8px 15px;
      background-color: #eef7ff;
      color: #0d6efd;
      font-size: 13px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .active-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      padding: 8px 15px;
      background-color: white;
      border-bottom: 1px solid #eee;
    }
    
    .active-filter-tag {
      display: flex;
      align-items: center;
      padding: 3px 10px;
      background-color: #eef7ff;
      color: #0d6efd;
      border-radius: 12px;
      font-size: 12px;
    }
    
    .active-filter-tag i {
      margin-left: 5px;
      cursor: pointer;
    }
    
    /* 视图切换 */
    .view-switch {
      display: flex;
      justify-content: flex-end;
      padding: 8px 15px;
      background-color: white;
      border-bottom: 1px solid #eee;
    }
    
    .switch-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      background-color: #f5f5f5;
      color: #666;
      margin-left: 5px;
    }
    
    .switch-btn.active {
      background-color: #0d6efd;
      color: white;
    }
    
    /* 赞助列表通用样式 */
    .sponsorship-list {
      padding: 10px 15px;
    }
    
    .list-section {
      margin-bottom: 20px;
    }
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      margin: 10px 0;
      color: #333;
      display: flex;
      align-items: center;
    }
    
    .section-title i {
      color: #0d6efd;
      margin-right: 8px;
    }
    
    /* 卡片式列表 */
    .card-list .sponsorship-item {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      border: 1px solid #f0f0f0;
    }
    
    .sponsor-header {
      padding: 12px 15px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
    }
    
    .sponsor-logo {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .no-logo {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background-color: #f1f3f5;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #495057;
      font-size: 16px;
      margin-right: 10px;
    }
    
    .sponsor-info {
      flex: 1;
    }
    
    .sponsor-name {
      font-size: 15px;
      font-weight: 600;
      color: #333;
      margin-bottom: 2px;
    }
    
    .sponsor-type {
      font-size: 12px;
      color: #666;
      display: flex;
      align-items: center;
    }
    
    .sponsor-type i {
      color: #fd7e14;
      margin-right: 3px;
      font-size: 10px;
    }
    
    .sponsorship-content {
      padding: 15px;
    }
    
    .sponsorship-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
      line-height: 1.4;
    }
    
    .sponsorship-desc {
      font-size: 14px;
      color: #555;
      line-height: 1.5;
      margin-bottom: 12px;
    }
    
    .media-container {
      margin-bottom: 12px;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .single-media {
      width: 100%;
      height: 180px;
      position: relative;
    }
    
    .media-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .no-media {
      width: 100%;
      height: 180px;
      background-color: #f8f9fa;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #adb5bd;
      font-size: 32px;
    }
    
    .multi-media {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 5px;
    }
    
    .multi-media .media-item {
      aspect-ratio: 1;
      position: relative;
      border-radius: 4px;
      overflow: hidden;
    }
    
    .multi-media .media-more {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
    }
    
    .sponsorship-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #666;
      padding-top: 8px;
      border-top: 1px dashed #eee;
    }
    
    .sponsorship-actions {
      display: flex;
      gap: 15px;
    }
    
    .action-item {
      display: flex;
      align-items: center;
      gap: 3px;
    }
    
    .sponsorship-tag {
      display: inline-block;
      padding: 3px 8px;
      background-color: #fff3cd;
      color: #fd7e14;
      border-radius: 4px;
      font-size: 12px;
      margin-right: 5px;
    }
    
    /* 列表式展示 */
    .list-style .sponsorship-item {
      background-color: white;
      border-radius: 10px;
      margin-bottom: 10px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.03);
      display: flex;
      overflow: hidden;
    }
    
    .list-media {
      width: 100px;
      height: 100px;
      flex-shrink: 0;
      position: relative;
    }
    
    .list-media-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .list-no-media {
      width: 100%;
      height: 100%;
      background-color: #f8f9fa;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #adb5bd;
      font-size: 24px;
    }
    
    .list-content {
      flex: 1;
      padding: 12px;
      display: flex;
      flex-direction: column;
    }
    
    .list-title {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin-bottom: 5px;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .list-sponsor {
      font-size: 12px;
      color: #666;
      margin-bottom: 5px;
    }
    
    .list-meta {
      margin-top: auto;
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: #999;
    }
    
    /* 网格式展示 */
    .grid-style {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    
    .grid-style .sponsorship-item {
      background-color: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    
    .grid-media {
      width: 100%;
      height: 120px;
      position: relative;
    }
    
    .grid-media-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .grid-no-media {
      width: 100%;
      height: 100%;
      background-color: #f8f9fa;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #adb5bd;
      font-size: 24px;
    }
    
    .grid-content {
      padding: 10px;
    }
    
    .grid-title {
      font-size: 13px;
      font-weight: 600;
      color: #333;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .grid-sponsor {
      font-size: 11px;
      color: #666;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
    }
    
    .grid-sponsor i {
      color: #fd7e14;
      margin-right: 3px;
      font-size: 9px;
    }
    
    .grid-tag {
      display: inline-block;
      padding: 2px 6px;
      background-color: #fff3cd;
      color: #fd7e14;
      border-radius: 3px;
      font-size: 10px;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 1000;
    }
    
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
    }
    
    .nav-item.active {
      color: #0d6efd;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav d-flex justify-content-between align-items-center">
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">赞助列表</h1>
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-search"></i>
    </button>
  </div>
  
  <!-- 筛选容器 -->
  <div class="filter-container collapsed">
    <!-- 基础筛选区 -->
    <div class="basic-filter">
      <div class="search-box">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索赞助项目或赞助商...">
      </div>
      
      <div class="filter-tags">
        <div class="filter-tag active">全部赞助</div>
        <div class="filter-tag">独家赞助</div>
        <div class="filter-tag">金牌赞助</div>
        <div class="filter-tag">银牌赞助</div>
        <div class="filter-tag">实物赞助</div>
        <div class="filter-tag">现金赞助</div>
      </div>
    </div>
    
    <!-- 筛选展开/收起按钮 -->
    <div class="filter-toggle collapsed" id="filterToggle">
      <span>高级筛选</span>
      <i class="fa fa-chevron-down"></i>
    </div>
    
    <!-- 高级筛选区 -->
    <div class="advanced-filters">
      <!-- 赞助金额筛选 -->
      <div class="filter-section">
        <div class="filter-title"><i class="fa fa-money"></i> 赞助金额</div>
        <div class="checkbox-group">
          <label class="checkbox-item">
            <input type="checkbox"> 1万元以下
          </label>
          <label class="checkbox-item">
            <input type="checkbox"> 1-5万元
          </label>
          <label class="checkbox-item">
            <input type="checkbox" checked> 5-10万元
          </label>
          <label class="checkbox-item">
            <input type="checkbox" checked> 10万元以上
          </label>
        </div>
      </div>
      
      <!-- 活动类型筛选 -->
      <div class="filter-section">
        <div class="filter-title"><i class="fa fa-calendar"></i> 活动类型</div>
        <div class="checkbox-group">
          <label class="checkbox-item">
            <input type="checkbox" checked> 会议论坛
          </label>
          <label class="checkbox-item">
            <input type="checkbox"> 体育赛事
          </label>
          <label class="checkbox-item">
            <input type="checkbox"> 公益活动
          </label>
          <label class="checkbox-item">
            <input type="checkbox"> 文艺演出
          </label>
        </div>
      </div>
      
      <!-- 时间范围筛选 -->
      <div class="filter-section">
        <div class="filter-title"><i class="fa fa-clock-o"></i> 时间范围</div>
        <div class="select-container">
          <select class="custom-select">
            <option value="all">全部时间</option>
            <option value="month" selected>近一个月</option>
            <option value="quarter">近三个月</option>
            <option value="halfyear">近半年</option>
            <option value="year">近一年</option>
          </select>
          <i class="fa fa-chevron-down select-arrow"></i>
        </div>
      </div>
      
      <!-- 关注度筛选 -->
      <div class="filter-section">
        <div class="filter-title"><i class="fa fa-eye"></i> 最低关注度</div>
        <div class="slider-container">
          <div class="slider-info">
            <span>当前: <span id="attentionValue">500</span>+ 浏览</span>
            <span>5000+</span>
          </div>
          <input type="range" min="100" max="5000" step="100" value="500" class="range-slider" id="attentionSlider">
        </div>
      </div>
    </div>
    
    <!-- 筛选操作按钮 -->
    <div class="filter-actions">
      <button class="btn btn-outline-secondary filter-btn" id="resetFilters">重置</button>
      <button class="btn btn-primary filter-btn" id="applyFilters">应用筛选</button>
    </div>
  </div>
  
  <!-- 筛选结果提示 -->
  <div class="filter-result">
    <span>找到 12 个符合条件的赞助项目</span>
    <span id="activeFilterCount">已选 5 项</span>
  </div>
  
  <!-- 已选筛选条件 -->
  <div class="active-filters">
    <div class="active-filter-tag">
      5-10万元 <i class="fa fa-times"></i>
    </div>
    <div class="active-filter-tag">
      10万元以上 <i class="fa fa-times"></i>
    </div>
    <div class="active-filter-tag">
      会议论坛 <i class="fa fa-times"></i>
    </div>
    <div class="active-filter-tag">
      近一个月 <i class="fa fa-times"></i>
    </div>
    <div class="active-filter-tag">
      500+浏览 <i class="fa fa-times"></i>
    </div>
  </div>
  
  <!-- 视图切换 -->
  <div class="view-switch">
    <button class="switch-btn active" id="cardView">
      <i class="fa fa-th-large"></i>
    </button>
    <button class="switch-btn" id="listView">
      <i class="fa fa-list"></i>
    </button>
    <button class="switch-btn" id="gridView">
      <i class="fa fa-th"></i>
    </button>
  </div>
  
  <!-- 赞助列表容器 -->
  <div class="sponsorship-container">
    <!-- 卡片式列表 (默认显示) -->
    <div class="sponsorship-list card-list" id="cardListView">
      <div class="list-section">
        <h2 class="section-title"><i class="fa fa-diamond"></i> 独家赞助</h2>
        
        <!-- 有多张图片的赞助 -->
        <div class="sponsorship-item">
          <div class="sponsor-header">
            <img src="https://picsum.photos/200/200?random=1" class="sponsor-logo" alt="赞助商logo">
            <div class="sponsor-info">
              <div class="sponsor-name">科技未来有限公司</div>
              <div class="sponsor-type"><i class="fa fa-star"></i> 年度独家合作伙伴</div>
            </div>
          </div>
          <div class="sponsorship-content">
            <div class="sponsorship-title">
              <span class="sponsorship-tag">独家</span>
              2023科技创新峰会全程赞助
            </div>
            <div class="sponsorship-desc">
              作为本次峰会的独家赞助商，我们将为参会者提供最新科技产品体验，并设立专属展区展示人工智能前沿技术应用案例。
            </div>
            <div class="media-container">
              <div class="multi-media">
                <div class="media-item">
                  <img src="https://picsum.photos/400/400?random=10" class="media-img" alt="赞助图片">
                </div>
                <div class="media-item">
                  <img src="https://picsum.photos/400/400?random=11" class="media-img" alt="赞助图片">
                  <div class="media-more">+3</div>
                </div>
              </div>
            </div>
            <div class="sponsorship-meta">
              <div>2023-11-15 至 2023-11-20</div>
              <div class="sponsorship-actions">
                <div class="action-item"><i class="fa fa-eye"></i> 1.2k</div>
                <div class="action-item"><i class="fa fa-heart"></i> 86</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="list-section">
        <h2 class="section-title"><i class="fa fa-trophy"></i> 金牌赞助</h2>
        
        <!-- 有单张图片的赞助 -->
        <div class="sponsorship-item">
          <div class="sponsor-header">
            <img src="https://picsum.photos/200/200?random=2" class="sponsor-logo" alt="赞助商logo">
            <div class="sponsor-info">
              <div class="sponsor-name">环球体育用品</div>
              <div class="sponsor-type"><i class="fa fa-star"></i> 金牌赞助商</div>
            </div>
          </div>
          <div class="sponsorship-content">
            <div class="sponsorship-title">
              <span class="sponsorship-tag">金牌</span>
              城市马拉松赛事装备赞助
            </div>
            <div class="sponsorship-desc">
              为参赛选手提供专业运动装备，包括跑鞋、运动服和运动背包，并设立沿途补给站提供能量支持。
            </div>
            <div class="media-container">
              <div class="single-media">
                <img src="https://picsum.photos/600/400?random=12" class="media-img" alt="赞助图片">
              </div>
            </div>
            <div class="sponsorship-meta">
              <div>2023-12-05</div>
              <div class="sponsorship-actions">
                <div class="action-item"><i class="fa fa-eye"></i> 856</div>
                <div class="action-item"><i class="fa fa-heart"></i> 52</div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 无图片的赞助 -->
        <div class="sponsorship-item">
          <div class="sponsor-header">
            <div class="no-logo">
              <i class="fa fa-bank"></i>
            </div>
            <div class="sponsor-info">
              <div class="sponsor-name">未来教育基金会</div>
              <div class="sponsor-type"><i class="fa fa-star"></i> 金牌赞助商</div>
            </div>
          </div>
          <div class="sponsorship-content">
            <div class="sponsorship-title">
              <span class="sponsorship-tag">金牌</span>
              乡村教育扶持计划
            </div>
            <div class="sponsorship-desc">
              捐赠教学设备和图书资料，资助乡村教师培训项目，设立奖学金帮助贫困学生完成学业。
            </div>
            <div class="media-container">
              <div class="single-media">
                <div class="no-media">
                  <i class="fa fa-book"></i>
                </div>
              </div>
            </div>
            <div class="sponsorship-meta">
              <div>2023全年</div>
              <div class="sponsorship-actions">
                <div class="action-item"><i class="fa fa-eye"></i> 1.5k</div>
                <div class="action-item"><i class="fa fa-heart"></i> 215</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 列表式展示 (默认隐藏) -->
    <div class="sponsorship-list list-style" id="listView" style="display: none;">
      <div class="list-section">
        <h2 class="section-title"><i class="fa fa-diamond"></i> 独家赞助</h2>
        
        <!-- 有多张图片的赞助 -->
        <div class="sponsorship-item">
          <div class="list-media">
            <img src="https://picsum.photos/400/400?random=10" class="list-media-img" alt="赞助图片">
          </div>
          <div class="list-content">
            <div class="list-title">2023科技创新峰会全程赞助</div>
            <div class="list-sponsor">科技未来有限公司 · 年度独家合作伙伴</div>
            <div class="list-meta">
              <div>11-15至11-20</div>
              <div><i class="fa fa-eye"></i> 1.2k</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="list-section">
        <h2 class="section-title"><i class="fa fa-trophy"></i> 金牌赞助</h2>
        
        <!-- 有单张图片的赞助 -->
        <div class="sponsorship-item">
          <div class="list-media">
            <img src="https://picsum.photos/400/400?random=12" class="list-media-img" alt="赞助图片">
          </div>
          <div class="list-content">
            <div class="list-title">城市马拉松赛事装备赞助</div>
            <div class="list-sponsor">环球体育用品 · 金牌赞助商</div>
            <div class="list-meta">
              <div>12-05</div>
              <div><i class="fa fa-eye"></i> 856</div>
            </div>
          </div>
        </div>
        
        <!-- 无图片的赞助 -->
        <div class="sponsorship-item">
          <div class="list-media">
            <div class="list-no-media">
              <i class="fa fa-book"></i>
            </div>
          </div>
          <div class="list-content">
            <div class="list-title">乡村教育扶持计划</div>
            <div class="list-sponsor">未来教育基金会 · 金牌赞助商</div>
            <div class="list-meta">
              <div>2023全年</div>
              <div><i class="fa fa-eye"></i> 1.5k</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 网格式展示 (默认隐藏) -->
    <div class="sponsorship-list grid-style" id="gridView" style="display: none;">
      <!-- 有多张图片的赞助 -->
      <div class="sponsorship-item">
        <div class="grid-media">
          <img src="https://picsum.photos/400/400?random=10" class="grid-media-img" alt="赞助图片">
        </div>
        <div class="grid-content">
          <div class="grid-title">2023科技创新峰会全程赞助</div>
          <div class="grid-sponsor"><i class="fa fa-star"></i> 科技未来有限公司</div>
          <div class="grid-tag">独家</div>
        </div>
      </div>
      
      <!-- 有单张图片的赞助 -->
      <div class="sponsorship-item">
        <div class="grid-media">
          <img src="https://picsum.photos/400/400?random=12" class="grid-media-img" alt="赞助图片">
        </div>
        <div class="grid-content">
          <div class="grid-title">城市马拉松赛事装备赞助</div>
          <div class="grid-sponsor"><i class="fa fa-star"></i> 环球体育用品</div>
          <div class="grid-tag">金牌</div>
        </div>
      </div>
      
      <!-- 无图片的赞助 -->
      <div class="sponsorship-item">
        <div class="grid-media">
          <div class="grid-no-media">
            <i class="fa fa-book"></i>
          </div>
        </div>
        <div class="grid-content">
          <div class="grid-title">乡村教育扶持计划</div>
          <div class="grid-sponsor"><i class="fa fa-star"></i> 未来教育基金会</div>
          <div class="grid-tag">金牌</div>
        </div>
      </div>
      
      <!-- 其他赞助示例 -->
      <div class="sponsorship-item">
        <div class="grid-media">
          <img src="https://picsum.photos/400/400?random=13" class="grid-media-img" alt="赞助图片">
        </div>
        <div class="grid-content">
          <div class="grid-title">青年创业大赛资金支持</div>
          <div class="grid-sponsor"><i class="fa fa-star"></i> 创新投资集团</div>
          <div class="grid-tag">银牌</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-handshake-o nav-icon"></i>
      <span>赞助</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 筛选面板展开/收起
    const filterContainer = document.querySelector('.filter-container');
    const filterToggle = document.getElementById('filterToggle');
    
    filterToggle.addEventListener('click', function() {
      filterContainer.classList.toggle('collapsed');
      filterContainer.classList.toggle('expanded');
      this.classList.toggle('collapsed');
    });
    
    // 关注度滑块交互
    const attentionSlider = document.getElementById('attentionSlider');
    const attentionValue = document.getElementById('attentionValue');
    
    attentionSlider.addEventListener('input', function() {
      attentionValue.textContent = this.value;
    });
    
    // 标签筛选交互
    document.querySelectorAll('.filter-tag').forEach(tag => {
      tag.addEventListener('click', function() {
        // 移除同组其他标签的active类
        this.parentElement.querySelectorAll('.filter-tag').forEach(t => {
          t.classList.remove('active');
        });
        // 为当前标签添加active类
        this.classList.add('active');
      });
    });
    
    // 应用筛选
    document.getElementById('applyFilters').addEventListener('click', function() {
      // 关闭筛选面板
      filterContainer.classList.add('collapsed');
      filterContainer.classList.remove('expanded');
      filterToggle.classList.add('collapsed');
      
      // 更新筛选结果计数
      updateFilterResults();
    });
    
    // 重置筛选
    document.getElementById('resetFilters').addEventListener('click', function() {
      // 重置所有筛选条件
      document.querySelectorAll('.filter-tag').forEach((tag, index) => {
        tag.classList.toggle('active', index === 0);
      });
      
      document.querySelectorAll('.checkbox-group input').forEach(checkbox => {
        checkbox.checked = false;
      });
      
      document.querySelector('.custom-select').selectedIndex = 0;
      attentionSlider.value = 500;
      attentionValue.textContent = 500;
      
      // 更新筛选结果
      updateFilterResults();
    });
    
    // 移除单个筛选条件
    document.querySelectorAll('.active-filter-tag i').forEach(icon => {
      icon.addEventListener('click', function() {
        this.parentElement.remove();
        updateFilterCount();
      });
    });
    
    // 更新筛选结果计数
    function updateFilterResults() {
      // 随机生成结果数量（实际应用中根据筛选条件计算）
      const resultCount = Math.floor(Math.random() * 15) + 5;
      document.querySelector('.filter-result span:first-child').textContent = 
        `找到 ${resultCount} 个符合条件的赞助项目`;
      
      updateFilterCount();
    }
    
    // 更新已选筛选条件数量
    function updateFilterCount() {
      const activeCount = document.querySelectorAll('.active-filter-tag').length;
      document.getElementById('activeFilterCount').textContent = `已选 ${activeCount} 项`;
    }
    
    // 视图切换功能
    const cardViewBtn = document.getElementById('cardView');
    const listViewBtn = document.getElementById('listView');
    const gridViewBtn = document.getElementById('gridView');
    
    const cardListView = document.getElementById('cardListView');
    const listView = document.getElementById('listView');
    const gridView = document.getElementById('gridView');
    
    cardViewBtn.addEventListener('click', function() {
      updateViewButtons(cardViewBtn);
      cardListView.style.display = 'block';
      listView.style.display = 'none';
      gridView.style.display = 'none';
    });
    
    listViewBtn.addEventListener('click', function() {
      updateViewButtons(listViewBtn);
      cardListView.style.display = 'none';
      listView.style.display = 'block';
      gridView.style.display = 'none';
    });
    
    gridViewBtn.addEventListener('click', function() {
      updateViewButtons(gridViewBtn);
      cardListView.style.display = 'none';
      listView.style.display = 'none';
      gridView.style.display = 'grid';
    });
    
    function updateViewButtons(activeBtn) {
      [cardViewBtn, listViewBtn, gridViewBtn].forEach(btn => {
        btn.classList.remove('active');
      });
      activeBtn.classList.add('active');
    }
    
    // 点赞功能
    document.querySelectorAll('.action-item .fa-heart').forEach(heart => {
      heart.addEventListener('click', function(e) {
        e.stopPropagation();
        if (this.classList.contains('text-danger')) {
          this.classList.remove('text-danger');
          // 减少点赞数
          let countEl = this.parentElement;
          let count = parseInt(countEl.textContent.trim().split(' ').pop());
          countEl.innerHTML = `<i class="fa fa-heart"></i> ${count - 1}`;
        } else {
          this.classList.add('text-danger');
          // 增加点赞数
          let countEl = this.parentElement;
          let count = parseInt(countEl.textContent.trim().split(' ').pop());
          countEl.innerHTML = `<i class="fa fa-heart text-danger"></i> ${count + 1}`;
        }
      });
    });
  </script>
</body>
</html>
